﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="topic.aspx.cs" Inherits="Baton.topic" %>

<!doctype html>
<html lang="en">

<head>
    <meta name="Generator" content="TPshop v1.1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport" />
    <title>接力棒</title>
    <link rel="stylesheet" href="css/idangerous.swipercss.css">
    <link rel="stylesheet" href="css/main.css">
    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <link href="css/mui.picker.min.css" rel="stylesheet" />
    <link href="css/mui.poppicker.css" rel="stylesheet" />
    <style>
        .miva {
        width: 80%;
        position: absolute;
        top: 428px;
        left: 10%;
        }

        /* 选择城市 */
        .mui-btn {
            /* position: absolute; */
            top: 70%;
            font-size: 16px;
            padding: 8px;
            margin: 3px;
        }

        .smui-content {
            display: flex;
            align-items: baseline;
            font-size: 0.9rem;
        }

        .select {
            height: 35px !important;
            margin-bottom: 15px !important;
            padding: 5px 15px !important;
            font-size: 0.9rem !important;
            border: 1px solid #fecd3b !important;
            border-radius: 15px!important;
        }

        /* h5.mui-content-padded {
            width: 55% !important;
            margin-left: 3px;
            display: flex;
            margin-top: 20px !important;
        } */

        .mui-content-padded {
            position: relative;
            width: 55% !important;
        }

        h5.mui-content-padded:first-child {
            margin-top: 12px !important;
        }

        .ui-alert {
            text-align: center;
            padding: 20px 10px;
            font-size: 16px;
        }

        .jt {
            position: absolute;
            width: 10%;
            top: 15%;
            right: 5%;
        }
        .choce{
            font-weight: bold;
            color: #fecd3b;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div class="bg">
        <img src="img/relay-bg.jpg" alt="" class="bg" />
        <img src="img/xzzt.png" alt="" class="xzzt">
        <div class="device">
            <div class="sign-btn">
                <img src="img/left-arrow.png" alt="" class="arrow-left">
                <img src="img/right-arrow.png" alt="" class="arrow-right">
            </div>
            <!-- 选择主题轮播 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"> <img src="img/t1.png"> </div>
                    <div class="swiper-slide"> <img src="img/t2.png"> </div>
                    <div class="swiper-slide"> <img src="img/t3.png"> </div>
                    <div class="swiper-slide"> <img src="img/t4.png"> </div>
                    <div class="swiper-slide"> <img src="img/t5.png"> </div>
                    <div class="swiper-slide"> <img src="img/t6.png"> </div>
                    <div class="swiper-slide"> <img src="img/t7.png"> </div>
                    <div class="swiper-slide"> <img src="img/t8.png"> </div>
                    <div class="swiper-slide"> <img src="img/t9.png"> </div>
                </div>
            </div>
        </div>
        
        <!-- 选择地区 -->
        <div class="miva">
            <div class="smui-content">
                <div class="choce">请选择：</div>
                <div class="mui-content-padded">
                    <input type="text" id='showCityPicker' class="select" disabled>
                    <img src="img/jt.png" alt="" class="jt" id='showCityBtn'>
                </div>
            </div>
        </div>
        <img src="img/relay-btn.png" alt="" class="theme-btn">
        <img src="img/hand.png" alt="" class="pass">

    </div>
    <!-- 分享 -->
    <div class="share">
        <img src="img/share.png" alt="" class="share-img">
    </div>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/idangerous.swiper.min.js"></script>
    <script src="js/idangerous.swiper.min.js"></script>
    <script src="js/mui.js"></script>
    <script src="js/mui.picker.js"></script>
    <script src="js/mui.poppicker.js"></script>
    <script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            // pagination: '.pagination',
            loop: true,
            grabCursor: true,
            paginationClickable: true
        })
        $('.arrow-left').on('click', function (e) {
            e.preventDefault()
            mySwiper.swipePrev()
        })
        $('.arrow-right').on('click', function (e) {
            e.preventDefault()
            mySwiper.swipeNext()
        });
        $('.theme-btn').click(function () {
            if ($('#showCityPicker').val() == "") {
                alert("请选择城市");
                return false;
            }

            $('.sign-btn').hide();
            $('.xzzt').hide();
            $('.pass').show();
            $('.miva').hide();
            $('.theme-btn').hide();
            mySwiper.destroy();
            //确认主题
            $.ajax({
                type: "POST",
                url: "/ashx/mainHandler.ashx", 
                data: {
                    action: "initUser",
                    topic: mySwiper.activeLoopIndex + 1,
                    province: $('#showCityPicker').val().split(" ")[0],
                    city: $('#showCityPicker').val().split(" ")[1]
                },
                dataType: "json",
                success: function (result) {
                    
                }
            });
        });
        $('.pass').click(function () {
            $('.share').show();
        });
        $('.share').click(function () {
            $('.share').hide();
        });

        $(function () {
            //查询当前用户主题信息
            $.ajax({
                type: "POST",
                url: "/ashx/mainHandler.ashx",
                data: {
                    action: "getUserTopic"
                },
                dataType: "json",
                success: function (result) {
                    if (result.data != "") {
                        mySwiper.swipeTo(result.data-1, 0, false);

                        $('.sign-btn').hide();
                        $('.xzzt').hide();
                        $('.pass').show();
                        $('.miva').hide();
                        $('.theme-btn').hide();
                        mySwiper.destroy();
                    }
                }
            });
        })

    </script>
    <script>
        (function ($, doc) {
            $.init();
            $.ready(function () {
                /**
                 * 获取对象属性的值
                 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
                 * @param {Object} obj 对象
                 * @param {String} param 属性名
                 */
                var _getParam = function (obj, param) {
                    return obj[param] || '';
                };

                //级联示例
                var cityPicker = new $.PopPicker({
                    layer: 2
                });
                cityPicker.setData(cityData);
                var showCityPickerButton = doc.getElementById('showCityBtn');
                var cityResult = doc.getElementById('showCityPicker');
                showCityPickerButton.addEventListener('tap', function (event) {
                    cityPicker.show(function (items) {
                        cityResult.value = items[0].text + " " + items[1].text;
                        console.log(cityResult.value)
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);
            });
        })(mui, document);
    </script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "Post",
            url: "/ashx/JsApiSign.ashx",
            dataType: 'json',
            data: { url: location.href.split('#')[0] },
            success: function (data) {
                wx.config({
                    debug: false,
                    appId: data.appid,
                    timestamp: data.timestamp,
                    nonceStr: data.noncestr,
                    signature: data.signature,
                    jsApiList: [
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'getNetworkType'
                    ]
                });
                wx.ready(function () {
                    //分享到朋友圈
                    wx.onMenuShareTimeline({
                        title: '<%=sharetitle%>', // 分享标题
                        link: '<%=shareurl%>', // 分享链接
                        imgUrl: '<%=shareimg%>', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            shareSuccess();
                        },
                        cancel: function () {
                            //alert("别这样啦，好东西要和朋友分享的嘛！");
                        },
                        fail: function (res) {
                            showTipsPopbox("分享失败，重新分享试试吧！");
                        }
                    });
                    //分享给朋友
                    wx.onMenuShareAppMessage({
                        title: '<%=sharetitle%>', // 分享标题
                        desc: '<%=sharecontents%>', // 分享描述
                        link: '<%=shareurl%>', // 分享链接
                        imgUrl: '<%=shareimg%>', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            shareSuccess();
                        },
                        cancel: function () {
                            //alert("别这样啦，好东西要和朋友分享的嘛！");
                        },
                        fail: function (res) {
                            showTipsPopbox("分享失败，重新分享试试吧！");
                        }
                    });
                    //分享到QQ			
                    wx.onMenuShareQQ({
                        title: '<%=sharetitle%>', // 分享标题
                        desc: '<%=sharecontents%>', // 分享描述
                        link: '<%=shareurl%>', // 分享链接
                        imgUrl: '<%=shareimg%>', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            shareSuccess();
                        },
                        cancel: function () {
                            //alert("别这样啦，好东西要和朋友分享的嘛！");
                        },
                        fail: function (res) {
                            showTipsPopbox("分享失败，重新分享试试吧！");
                        }
                    });
                    //分享到微博
                    wx.onMenuShareWeibo({
                        title: '<%=sharetitle%>', // 分享标题
                        desc: '<%=sharecontents%>', // 分享描述
                        link: '<%=shareurl%>', // 分享链接
                        imgUrl: '<%=shareimg%>', // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                            shareSuccess();
                        },
                        cancel: function () {
                            //alert("别这样啦，好东西要和朋友分享的嘛！");
                        },
                        fail: function (res) {
                            showTipsPopbox("分享失败，重新分享试试吧！");
                        }

                    });

                    wx.getNetworkType({
                        success: function (res) {
                            var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
                            $("#network").val(networkType);
                            network = networkType;
                        }
                    });
                    //wx.onMenuShareAppMessage(shareData);
                    //wx.onMenuShareTimeline(shareData);
                    //wx.onMenuShareQQ(shareData);
                    //wx.onMenuShareWeibo(shareData);
                });
                wx.error(function (res) {
                    if (res.errMsg == "config:invalid url domain") {
                        //alert("域名与使用的appid没有绑定")
                    } else if (res.errMsg == "config:permission denied") {
                        alert("公众号未认证、或者认证失效，接口请求失败")
                    } else if (res.errMsg == "config:function not exist") {
                        $("body").append("<div style=\"display:none\">错误提示:当前微信客户端版本不支持该接口，请升级到新版体验</div>")
                    } else if (res.errMsg == "config:invalid signature") {
                        $("body").append("<div style=\"display:none\">错误提示:签名错误，请联系管理员</div>")
                    } else {
                        $("body").append("<div style=\"display:none\">错误提示：" + res.errMsg + "</div>")
                    }
                })
            },
            error: function () { $("body").append("服务系统失败，请与管理员联系") }
        })
    </script>
</body>

</html>